<script setup lang="ts">
import { NDatePicker } from 'naive-ui'
import { watch, ref, useAttrs } from 'vue'
import { format } from 'date-fns'
const props = useAttrs()

const ct = ref("00:00:00")
const handleBlur = (v: any,c:any) => ct.value = c || "00:00:00"


watch(
  () => props['formatted-value'],
  () => {
    // @ts-ignore
    if (props['formatted-value']) handleBlur(props['formatted-value'].split(' ')[1])
  }
)
</script>

<template>
  <NDatePicker input-readonly
    v-bind="{
      ...$attrs,
      ...{
        timePickerProps: { onConfirm: handleBlur },
        defaultTime: ct
      }
    }"
  />
</template>
